<template>
	<view class="box">
		<view class="item" v-for="item in forumData" :key="item._id">
			<view class="title">{{ item.title }}</view>
			<view class="writer">
				<image :src="item.user_id.avater" mode="" class="tupian"></image>
				<text class="username">{{ item.user_id.nickname }}</text>
			</view>
			<view class="content" @click="go(item)">
				<text class="top">
					{{ item.content }}
				</text>
				<view class="but">
					<image class="butimg" :src="item.images[0]" mode=""></image>
					<image class="butimg" :src="item.images[1]" mode=""></image>
					<image class="butimg" :src="item.images[2]" mode=""></image>
				</view>
			</view>
			<view class="ztFotter">
				<view @click="btn(item._id)" :class="help.arr.includes(item._id) ? 'red' : ''">
					❤
				</view>
				<uni-notice-bar color="#999" background-color="#fff" single showClose :text="`${item.num}赞`" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	const help = reactive({
		arr:[],
	})
	let forumData = reactive([])
	uni.request({
		url: 'http://127.0.0.1:3366/zt/show',
		method: 'GET',
		success({data}:any) {
			data.data.forEach((i:any) => {
				forumData.push(i)
			})
		}
	})
	
	uni.request({
		url: 'http://127.0.0.1:3366/zt/zan',
		method: 'POST',
		data:JSON.parse(localStorage.getItem("user")),
		success({data}:any) {
			data.data.forEach(item=>{
				help.arr.push(item)
			})
		}
	})
	
	function go (value){
		uni.navigateTo({
			url:`/pages/web/zjb/Details?id=${JSON.stringify(value)}`,
		})
	}
	
	function btn(idx){
		if(help.arr.includes(idx)){
			help.arr = help.arr.filter(item => item !== idx)
			uni.request({
				url: 'http://127.0.0.1:3366/zt/dropZan',
				method: 'POST',
				data:{user_id:JSON.parse(localStorage.getItem("user")).data._id,forum_id:idx},
				success() {
					const index = forumData.findIndex(item => item._id == idx)
					forumData[index]['num'] -= 1
				}
			})
		}else{
			help.arr.push(idx)
			uni.request({
				url: 'http://127.0.0.1:3366/zt/addZan',
				method: 'POST',
				data:{user_id:JSON.parse(localStorage.getItem("user")).data._id,forum_id:idx},
				success() {
					const index = forumData.findIndex(item => item._id == idx)
					forumData[index]['num'] += 1
				}
			})
		}
	}
</script>

<style scoped>
	.box {
		background-color: #f5f5f5;
		padding: 5px 10px;
	}

	.item {
		background-color: #fff;
		/* height: 200px; */
		padding: 10px;
		margin: 10px 0;
	}

	.title {
		font-weight: bold;
		font-size: 18px;
	}

	.writer {
		margin: 10px 0;
	}

	.tupian {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		vertical-align: middle;
	}

	.username {
		vertical-align: middle;
		margin-left: 10px;
	}

	.content {}

	.top {
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.but {
		display: flex;
		justify-content: flex-start;
		margin: 10px 0;
	}
	
	.but>image{
		width: 210rpx;
		height: 210rpx;
	}

	.butimg {
		/* width: 150px; */
		height: 120px;
		margin: 5px;
		border-radius: 10px;
	}
	
	.ztFotter{
		display: flex;
		align-items: center;
	}
	
	.ztFotter>view{
		margin-bottom: 0;
	}
	
	.red{
		color: red;
	}
</style>